<template>
  <div class="aj-list-operation" @mouseenter="hoverActive(true)" @mouseleave="hoverActive(false)">
    <template v-if="this.direction === 'horizontal'">
      <div class="aj-list-operation-horizontal">
        <div class="aj-list-operation-title">
          <slot name="title">左侧测试</slot>
        </div>
        <div class="aj-list-operation-outer" ref="outerRef">
          <div class="aj-list-operation-inner" ref="innerRef">
            <slot>
              <div style="width: 100px">测测试测试测试测试测试测试测试测试测试测试测试测试测试测试试</div>
            </slot>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="aj-list-operation-vertical">
        <div class="aj-list-operation-title">
          <slot name="title">左侧测试</slot>
        </div>
        <div class="aj-list-operation-outer" ref="outerRef">
          <div class="aj-list-operation-inner" ref="innerRef">
            <slot>
              <div>测试测试测试测试测试测试测试测试测试</div>
            </slot>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
let timer;
export default {
  name: 'OperationList',
  props: {
    direction: {
      type: String,
      default: 'horizontal' // horizontal or vertical
    }
  },
  data() {
    return {};
  },

  created() {},
  methods: {
    hoverActive(bo) {
      this.$refs.outerRef.classList.remove('outer-animated');
      if (timer) {
        clearTimeout(timer);
      }

      if (bo) {
        this.$refs.outerRef.classList.add('outer-animated');
        if (this.direction === 'horizontal') {
          this.$refs.outerRef.style.width = this.$refs.innerRef.offsetWidth + 'px';
        } else {
          this.$refs.outerRef.style.height = this.$refs.innerRef.offsetHeight + 'px';
        }
        timer = setTimeout(() => {
          this.$refs.outerRef.classList.remove('outer-animated');
        }, 500);
      } else {
        this.$refs.outerRef.classList.add('outer-animated');
        if (this.direction === 'horizontal') {
          this.$refs.outerRef.style.width = '0';
        } else {
          this.$refs.outerRef.style.height = '0';
        }
        timer = setTimeout(() => {
          this.$refs.outerRef.classList.remove('outer-animated');
        }, 500);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.aj-list-operation {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.aj-list-operation-horizontal {
  display: flex;
  background: #ccc;
  .aj-list-operation-title {
    flex: 1;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
  }
  .aj-list-operation-outer {
    height: 100%;
    width: 0;
    overflow: hidden;
    background: transparent;
  }
  .aj-list-operation-inner {
    display: inline-block;
    //white-space: nowrap;
  }
}
.aj-list-operation-vertical {
  .aj-list-operation-title {
    padding: 10px;
    background: #eee;
  }
  .aj-list-operation-outer {
    height: 0;
    width: 100%;
    background: #ccc;
    overflow: hidden;
  }
  .aj-list-operation-inner {
    background: #fff;
    white-space: nowrap;
  }
}

.outer-animated {
  transition: width 0.5s ease, height 0.5s ease;
}
</style>
